<template>
	<view class="p30">
		<view class="g-data-box mb30 ptb45">
			<view class="flex-box colf tc mb40">
				<view class="flex1">
					<view class="mb15">
						<text class="fs24">¥</text>
						<text class="fs40">{{userinfo.userprofile.total_borker_money}}</text>
					</view>
					<view class="fs24 cola">总收益</view>
				</view>
				<view class="flex1">
					<view class="mb15">
						<text class="fs24">¥</text>
						<text class="fs40">{{userinfo.userprofile.frezze_broker_money}}</text>
					</view>
					<view class="fs24 cola">冻结中</view>
				</view>
				<view class="flex1">
					<view class="mb15">
						<text class="fs24">¥</text>
						<text class="fs40">{{userinfo.userprofile.borker_withdraw_money}}</text>
					</view>
					<view class="fs24 cola">提现审核</view>
				</view>
				<view class="flex1">
					<view class="mb15">
						<text class="fs24">¥</text>
						<text class="fs40">{{userinfo.userprofile.borker_money}}</text>
					</view>
					<view class="fs24 cola">可提现</view>
				</view>
			</view>
			<view class="btn-cash" @click="withdraw()">申请提现</view>
		</view>

		<view class="flex-box tab">
			<view class="item" :class="{'active': tabIdx == 0}" @click="tabClick(0)">收益明细</view>
			<view class="item" :class="{'active': tabIdx == 1}" @click="tabClick(1)">提现明细</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" top="0" :up="upOption">
			<template v-if="tabIdx == 0">
				<view class="ptb40 m-hairline--bottom" v-for="(item,index) in moneyLogLists">
					<view class="flex-box mb30">
						<view class="fs30 col89 mr10">订单号</view>
						<view class="fs30 col10 flex1">{{item.extra.order_no}} 中介费</view>
						<view class="fs24 col89">{{item.createtime_text}}</view>
					</view>
					<view class="fs30 col10 mb30">{{item.extra.name}}</view>
					<view class="flex-box flex-between">
						<view class="flex-box flex-align-baseline">
							<view class="fs22 col89">房东中介费:</view>
							<view class="fs24 col-price">¥</view>
							<view class="fs34 col-price">{{item.extra.lessor_medium_money}}</view>
						</view>
						<view class="flex-box flex-align-baseline">
							<view class="fs22 col89">租客中介费:</view>
							<view class="fs24 col-price">¥</view>
							<view class="fs34 col-price">{{item.extra.renter_medium_money}}</view>
						</view>
						<view class="flex-box flex-align-baseline">
							<view class="fs22 col89">实际到账:</view>
							<view class="fs24 col-price">¥</view>
							<view class="fs34 col-price">{{item.money}}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="tabIdx == 1">
				<view class="pt30 pb40 m-hairline--bottom" v-for="(item,index) in moneyLogLists">
					<view class="flex-box mb30">
						<view class="fs30 col10 flex-grow-1">申请提现</view>
						<view class="fs24 col89">{{item.createtime_text}}</view>
					</view>
					<view class="flex-box">
						<view class="fs30 green1 flex-grow-1">-¥{{item.money}}</view>
						<view class="fs34 col10" :class="(item.audit_state==1?'red':'')">{{item.audit_state_text}}</view>
					</view>
				</view>
			</template>
			<mescroll-empty v-if="moneyLogLists.length<=0"></mescroll-empty>
		</mescroll-body>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const core = require('@/xilu/core.js');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				userinfo:{},
				tabIdx: 0,
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/none-data.png',
						tip: '暂无内容' 
					}
				},
				moneyLogLists:[],
			}
		},
		onLoad(){
			this.initData();
		},
		methods: {
			tabClick(i) {
				this.tabIdx = i;
				this.mescroll.resetUpScroll();
			},
			initData() {
				var that = this;
				core.get({url:"api/xiluhouse.user/index",data:{},success:(ret)=>{
					 that.userinfo = ret.data;
				},loading:false});
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				let that = this;
				let tabIdx = that.tabIdx;
				
				let q = that.q;
				let postData = {
					page: page.num, // 页码, 默认从1开始
					pagesize: page.size, // 每页数据条数
				};
				if(tabIdx == 0){
					postData['type'] = 3;
				}else{
					postData['is_broker'] = 2;
				}
				//联网加载数据
				let url = tabIdx==0 ? "api/xiluhouse.money/money_log_list":"api/xiluhouse.money/withdraw_log_list"
				core.get({url:url,data:postData,success:(ret)=>{
					 if(page.num == 1) that.moneyLogLists = []; //如果是第一页需手动制空列表
					 that.moneyLogLists = that.moneyLogLists.concat(ret.data.data); //追加新数据
					 //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					 that.mescroll.endSuccess(ret.data.data.length);
				},loading:false});
			},
			withdraw(){
				uni.navigateTo({
					url: "/pages/member/cash_out/cash_out?is_broker=2",
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.g-data-box {
		background: linear-gradient(93deg, #515151 0%, #333333 100%);
	}

	.tab {
		margin: 0 0 10rpx;

		.item {
			margin: 0 30rpx 0 0;
			font-size: 24rpx;
			color: #898989;
			line-height: 36rpx;
		}

		.item.active {
			font-size: 34rpx;
			color: #101010;
			font-weight: bold;
		}
	}
</style>
